<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<jsp:include page="common_header.jsp" flush="true"></jsp:include>
<link rel="stylesheet" type="text/css" href="${path }/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" />
<title>新建网站角色 - 管理员管理 - H-ui.admin v3.1</title>
</head>
<body>
<article class="page-container">
	<form action="" method="post" class="form form-horizontal" id="form-admin-role-add">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>权限名称：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" name="name">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>权限类型：</label>
			<div class="formControls col-xs-8 col-sm-9 skin-minimal" id="typeDiv">
				
			    <div class="radio-box">
				    <input type="radio" id="radio-1" name="type" value="0">
				    <label for="radio-1">页面</label>
				  </div>
				  <div class="radio-box">
				    <input type="radio" id="radio-2" name="type" value="1" checked>
				    <label for="radio-2">功能</label>
				  </div>
				  <div class="radio-box">
				    <input type="radio" id="radio-3" name="type" value="2" onclick="showUrlOrno()">
				    <label for="radio-3">分组</label>
				  </div>
			</div>
		</div>
		<div class="row cl" id="urlDiv">
			<label class="form-label col-xs-4 col-sm-3">路径：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" name="url">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">上级权限：</label>
			<div class="formControls col-xs-8 col-sm-9 ztree-dropdown">
				<input id="input-pid" readonly="readonly" type="text" class="input-text custom-input" value="" placeholder="">
				<input type="hidden" name="pid" id="pidHid">
				<div id="pidTreeDiv" class="ztree-dropdown-content" style="display: none; position: absolute;z-index: 999;background-color:  #ccffcc">
			        <ul id="partTree" class="ztree"></ul>
			    </div>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">排序：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" id="roleName" name="order">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">备注：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" id="roleName" name="remark">
			</div>
		</div>

		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
				<button type="submit" class="btn btn-success radius" id="admin-role-save" name="admin-role-save"><i class="icon-ok"></i> 确定</button>
			</div>
		</div>
	</form>
</article>
<div id=""></div>
<jsp:include page="_footer.jsp" flush="true"></jsp:include>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="${path }/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script> 
<script type="text/javascript">
var roleId;
$(function(){
	$('#typeDiv input').on('ifChanged', function(event){
		if (event.currentTarget.value == '2') {
			// 隐藏url
			$('#urlDiv').css('display', 'none');
			$('#urlDiv input').attr('disabled', true);
		} else {
			// 显示url
			$('#urlDiv').css('display', 'block');
			$('#urlDiv input').attr('disabled', false);
		}
	});

	$('.skin-minimal input').iCheck({
		checkboxClass: 'icheckbox-blue',
		radioClass: 'iradio-blue',
		increaseArea: '20%'
	});
// 	$(".permission-list dt input:checkbox").click(function(){
// 		$(this).closest("dl").find("dd input:checkbox").prop("checked",$(this).prop("checked"));
// 	});
// 	$(".permission-list2 dd input:checkbox").click(function(){
// 		var l =$(this).parent().parent().find("input:checked").length;
// 		var l2=$(this).parents(".permission-list").find(".permission-list2 dd").find("input:checked").length;
// 		if($(this).prop("checked")){
// 			$(this).closest("dl").find("dt input:checkbox").prop("checked",true);
// 			$(this).parents(".permission-list").find("dt").first().find("input:checkbox").prop("checked",true);
// 		}
// 		else{
// 			if(l==0){
// 				$(this).closest("dl").find("dt input:checkbox").prop("checked",false);
// 			}
// 			if(l2==0){
// 				$(this).parents(".permission-list").find("dt").first().find("input:checkbox").prop("checked",false);
// 			}
// 		}
// 	});
	
	$("#form-admin-role-add").validate({
		rules:{
			name:{
				required:true,
				maxlength:30
			},
			type:{
				required:true
			}
		},
		success:"valid",
		submitHandler:function(form){
			addOrUpdateRole();
		}
	});
	
});

function addHoverDom(treeId, treeNode) {
    $("#" + treeNode.tId).addClass("hover");
};
function removeHoverDom(treeId, treeNode) {
    $("#" + treeNode.tId).removeClass("hover");
};


function onClick(e, treeId, treeNode) {
   	$("#input-pid").val(treeNode.name);
    $('#pidHid').val(treeNode.id);
}

function showMenu() {
    $("#pidTreeDiv").slideDown("fast");
    $("body").bind("mousedown", onBodyDown);
}
function hideMenu() {
    $("#pidTreeDiv").fadeOut("fast");
    $("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
    if (!(event.target.id == "input-pid" || event.target.id == "pidTreeDiv" || $(event.target).parents("#pidTreeDiv").length>0)) {
        hideMenu();
    }
}

	var setting = {
	    view: {
	        showLine: false,
	        showIcon:false,
	        dblClickExpand: false,
	        addHoverDom: addHoverDom,
	        removeHoverDom: removeHoverDom
	    },
	    data: {
	        simpleData: {
	            enable: true
	        }
	    },
	    callback: {
	        onClick: onClick
	    }
	};


	


function addOrUpdateRole(){
	var url = "${path}/sysPermission/add.do";
	var type = '添加';
	var formData = $('#form-admin-role-add').serialize();
	if (roleId) {
		url = "${path}/sysPermission/update.do";
		type = '修改';
		formData += '&id='+roleId;
	}
	$.ajax({
		url: url,
		data: formData, 
		type: "POST",
		success: function(data, textStatus){
			if (data.code == 0) {
				layer.msg(type+'成功!',{icon:1,time:1000});
				setTimeout(function(){
					var index = parent.layer.getFrameIndex(window.name);
					parent.refresh(index);
				}, 1500);
			}else{
				alert(type+"失败！");
			}
		},
		error: function (data, textStatus, errorThrown) {
			alert("系统错误！");
		}
	});	
	
}

function fillData(id){
	roleId = id;
	$.ajax({
		url: "${path}/sysPermission/detail.do",
		data: 'id='+id, 
		type: "POST",
		success: function(data, textStatus){
			if (data.code == 0) {
				var obj = data.data;
				fillFormByName('form-admin-role-add', obj);
				
				$.ajax({
			        type: 'get',
			        url: '../sysPermission/queryTree4Add.do',
			        cache: false,  //禁用缓存
			        dataType: "json",
			        success: function (result) {
			        	if (result.code == 0) {
			        		// 去掉自身节点
			        		let editPerms = [];
			        		for (let k of result.data) {
								if (k.id != id) {
									editPerms.push(k);
								}
							}
			        		
			            	$.fn.zTree.init($("#partTree"), setting, editPerms);
			            	
			            	for(let o of result.data){
			            		if(o.id == obj.pid){
			            			$('#input-pid').val(o.name);
			            			break;
			            		}
			            		
			            	}
			            	
			            	$('#input-pid').click(function(){
			        			showMenu();
			        		});
			            	
						} else{
							alert('error');
						}
			        }
			    });
			}else{
				alert(data.msg);
			}
		},
		error: function (data, textStatus, errorThrown) {
			var s=JSON.stringify(data);
		}
	});
}

function initPermsData(){
	$.ajax({
        type: 'get',
        url: '../sysPermission/queryTree4Add.do',
        cache: false,  //禁用缓存
        dataType: "json",
        success: function (result) {
        	if (result.code == 0) {
            	$.fn.zTree.init($("#partTree"), setting, result.data);
            	$('#input-pid').click(function(){
        			showMenu();
        		});
			} else{
				alert('error');
			}
        }
    });
}

function showUrlOrno(){
	var $addForm =$('#form-admin-role-add');
	alert($addForm);
}

</script>
</body>
</html>
